<template>
    <div class="background_div">
        <el-container>
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-container>
                <el-main style="padding: 0;">
                    <el-container>
                        <el-main class="Top_div base_margin">
                            <div class="Top_base_div">
                                <div class="Top_avater_div">
                                    <el-avatar class="UserAvatar" :size="50" :src="circleUrl" />
                                </div>
                                <div class="Top_Message_div">
                                    <p class="UserMessage" style="font-size: large;">
                                        <span> {{ UserMessage.nickname }}</span>
                                        <!--                                        &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="danger" v-if="!checkIsMyself() && !checkIsFollowed()" @click="toFollow">关注</el-button>-->
                                        <!--                                        &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="info" v-if="!checkIsMyself() && checkIsFollowed()">已关注</el-button>-->
                                        &nbsp;&nbsp;&nbsp;&nbsp; <el-button type="danger" v-show="!isMyself && !isHasFollow" @click="toFollow(followId,userId)">关注</el-button>
                                        &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="info" v-show="!isMyself && isHasFollow" @click="toUnFollow(followId,userId)">已关注</el-button>
                                    </p>
                                    <p class="UserMessage" style="font-size: small;">欢迎来到我的个人空间</p>
                                </div>
                                <div>

                                </div>
                                <div class="Top_details_div">
                                    <el-row>

                                        <el-col :span="12">
                                            <el-link :underline="false" @click="FollowList">
                                                <div class="column">
                                                    <div class="text">关注列表</div>
                                                    <div class="number">{{ followInf.followNum }}</div>
                                                </div>
                                            </el-link>
                                        </el-col>

                                        <el-col :span="12">
                                            <el-link :underline="false" @click="FansList">
                                                <div class="column">
                                                    <div class="text">粉丝列表</div>
                                                    <div class="number">{{ followInf.fansNum }}</div>
                                                </div>
                                            </el-link>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-container>
        <!--        class="Top_options_div base_margin"-->
<!--        border- -->
        <div class="Top_options_div base_margin" >
            <el-tabs v-model="activeName"  @tab-click="handleClick" type="border-card" >
                <el-tab-pane label="视频" name="video">

                    <el-row :gutter="5" style="margin-left: 20px;margin-right: 20px">
                        <el-col :span="6"  v-for="(item) in Courses">
                            <CourseCard  :course="item" :video="true" :text="false"></CourseCard><br>
                        </el-col>
<!--                        <el-col :span="1">-->

<!--                        </el-col>-->
                    </el-row>
                    <div class="pageDiv">
                        <el-pagination background layout="prev, pager, next"
                                       :page-size="pageInfo.pageSize"
                                       :total="totalCount"
                                       @current-change="changePageNum"/>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="文件" name="text">
                    <el-row :gutter="5" style="margin-left: 20px;margin-right: 20px">
                        <el-col :span="6"  v-for="(item) in TextualMaterial">
                            <CourseCard  :course="item" :video="false" :text="true"></CourseCard><br>
                        </el-col>
                    </el-row>
                    <div class="pageDiv">
                        <el-pagination background layout="prev, pager, next"
                                       :page-size="pageInfo.pageSize"
                                       :total="totalCount"
                                       @current-change="changePageNum"/>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <el-dialog v-model="PreviewVisible"
               append-to-body="true"
               :title="title"
               center
               style="width: 30%"
    >
        <div class="followAndFansDivClass" v-show="followListVisible">
            <!--            class="text item"-->
            <p v-for="followed in followList" :key="followed" class="followAndFansListClass" >
                <el-link :underline="false" @click="toThisPerson(followed.id)">
                <span> <el-avatar class="UserAvatar" :size="50" :src="followed.avatarUrl" v-if="followed.avatarUrl!=null && followed.avatarUrl!=''" />
                        <el-avatar v-else :size="50"
                                   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </span>
                <span class="nameClass" v-if="followed.isTeacher!=2">{{followed.nickname}}</span>
                <span class="nameClass" v-else>{{followed.trueName}}</span>
                <!--                <el-button type="info" @click="toUnFollow(followed.id,userId)">已关注</el-button>-->
                <el-tag size="mini" type="danger" v-show="followed.isTeacher==2" style="margin-left: 5px;">老师</el-tag>
                </el-link>
            </p>
            <!--            <p v-for="o in 100" :key="o" class="text item">{{ 'List item ' + o }}</p>-->
        </div>
        <div v-show="fansListVisible" class="followAndFansDivClass">
            <p v-for="fans in fansList" :key="fans" class="followAndFansListClass" >
                <el-link :underline="false" @click="toThisPerson(fans.id)">
                <span> <el-avatar class="UserAvatar" :size="50" :src="fans.avatarUrl" v-if="fans.avatarUrl!=null && fans.avatarUrl!=''"/>
                        <el-avatar v-else :size="50"
                                   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </span>

                    <span class="nameClass" v-if="fans.isTeacher!=2">{{fans.nickname}}</span>
                    <span class="nameClass" v-if="fans.isTeacher==2">{{fans.trueName}}</span>
                    <!--                <el-button type="info" @click="toUnFollow()">关注</el-button>-->
                    <el-tag size="mini" type="danger" v-show="fans.isTeacher==2" >老师</el-tag>
                </el-link>
            </p>
        </div>
    </el-dialog>


</template>
<script setup>
    import CourseCard from '@/components/CourseCard.vue';
    import { ref, onMounted, onUnmounted, reactive, toRefs,onBeforeMount,watch } from 'vue';
    import { House, StarFilled } from '@element-plus/icons-vue'
    import {useRoute,useRouter,onBeforeRouteLeave} from 'vue-router'
    import {
        follow,
        isFollowed,
        myClassPage,
        myFans, myFansCount,
        myFollowCount, myFollows,
        myTextPages,
        selectUserById,
        unFollow
    } from "@/api/user";
    import {useStore} from 'vuex'
    import {ElMessage, ElMessageBox} from "element-plus";


    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
    const followId = route.query.id;
    const userId = store.getters.getId;
    const pageInfo = reactive({pageNum: 1, pageSize: 8, id: followId, search: ''});
    const Courses = ref('')
    const TextualMaterial = ref('');
    const totalCount = ref(0);
    const activeName = ref('video')
    const isMyself = ref(false);
    const isHasFollow = ref(false);
    const title =ref('粉丝列表');
    const PreviewVisible = ref(false);
    const followList = ref();
    const fansList = ref();
    const followListVisible = ref(false);
    const fansListVisible = ref(false);

    //followId的信息
    const UserMessage = ref({
        age:0,
        avatarUrl:'',
        isBanned:0,
        isTeacher:0,
        trueName:"",
        vip:"",
        nickname:""

    });
    //关注和粉丝列表
    const followInf = ref({
        followNum:0,
        fansNum:0,

    })
    onBeforeMount( async ()=>{
        isMyself.value = checkIsMyself();
        let res = await isFollowed({followId:followId,userId:userId});
        isHasFollow.value = res.data;
    })
    // console.log(route.query)

    //解决头部导航跳转同一路由问题
    watch(route, (to, from) => {
        if (to.query.refresh) {
            location.reload();

        }
    });

    // onBeforeRouteLeave((to, from, next) => {
    //     next(vm => {
    //         vm.$router.replace(from.path)
    //         // 跳到该路由页面后，再替换为from.path来源路径
    //     })
    // })

    onMounted( ()=>{
        selectUserInfo();
        myCoursePage();
        myTextPage();
        followCount();
        fasCount();
    })
    //获取followid的信息
    const selectUserInfo = ()=>{
        selectUserById({id:followId}).then((res)=>{
            // console.log(res.data)
            UserMessage.value = res.data
        })
    }
    //检查是否是本人
    const checkIsMyself = ()=>{
        if (store.getters.getId == route.query.id){
            return true;
        }
        return false;
    }
    //检查是否已关注
    const  checkIsFollowed =  ()=>{
        isFollowed({followId:followId,userId:userId}).then((res)=>{
            console.log(res.data)
            return res.data;
        })
    }
    //关注
    const toFollow = (followId,userId)=>{
        follow({followId:followId,userId:userId}).then((res)=>{
            ElMessage.success("关注成功");
            isHasFollow.value = true;
        })
    }
    //取关
    const toUnFollow = (followId,userId)=>{
        ElMessageBox.confirm(
            '确认取消关注',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(()=>{
            unFollow({followId:followId,userId:userId}).then((res)=>{
                ElMessage.info("取消关注")
                isHasFollow.value = false;
            })
        })

    }
    //关注人数
    const followCount = ()=>{
        myFollowCount({userId:followId}).then((res)=>{
            followInf.value.followNum = res.data;

        })
    }
    //粉丝人数
    const fasCount = ()=>{
        myFansCount({userId:followId}).then((res)=>{
            followInf.value.fansNum = res.data;

        })
    }
    const FollowList =()=>{
        if (isMyself.value){
            PreviewVisible.value = true;
            title.value = '关注列表';
            fansListVisible.value = false;
            myFollows({userId:userId}).then((res)=>{
                console.log(res.data);
                followListVisible.value = true;
                followList.value = res.data;
            })
        }

    }

    const FansList = ()=>{
        if (isMyself.value){
            PreviewVisible.value = true;
            title.value = '粉丝列表';
            followListVisible.value = false;
            myFans({userId:userId}).then((res)=>{
                fansList.value = res.data;
                fansListVisible.value = true;
            })
        }
    }

    const toThisPerson = (id)=>{
        router.push({paht:'/personspace',query:{id:id,refresh:true}});
        // location.reload();
    }
    const myCoursePage = () => {
        myClassPage(pageInfo).then((res) => {
            if (res.data.total > 0) {
                Courses.value = res.data.list[0].courses;
                totalCount.value = res.data.total;
                for (let i = 0; i < Courses.value.length; i++) {
                    Courses.value[i]['tchname'] = UserMessage.value.trueName;
                }

                // console.log(res.data)
            } else {
                Courses.value=[];
            }
        })
    }

    const myTextPage = ()=>{
        myTextPages(pageInfo).then((res)=>{
            if (res.data.total > 0) {
                TextualMaterial.value = res.data.list[0].textualMaterials;
                totalCount.value = res.data.total;
                for (let i = 0; i < TextualMaterial.value.length; i++) {
                    TextualMaterial.value[i]['tchname'] = UserMessage.value.trueName
                }
            }
            else {
                TextualMaterial.value = []
            }
        })

    }



</script>
<style scoped>
    :deep(.my-label) {
        background: var(--el-color-success-light-9) !important;
    }

    :deep(.my-content) {
        background: var(--el-color-danger-light-9);
    }

    .base_margin {
        margin-left: 120px;
        margin-right: 120px;
    }

    .background_div {

        background-color: F4F5F7;

        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: top left;

    .Top_div {
        background-color: white;
        /* margin-left: var(--global-margin-left)px;
        margin-right: 10%; */
        padding: 0%;
        /* width: 80%; */
        /* height: 23%; */
        height: 200px;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)),
        url("../../assets/YanXueYuan.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: left;


    }

    .Top_base_div {
        position: relative;
        margin-top: 100px;
        margin-left: 2.5%;
        /* width: 50%; */
        width: 90%;
        display: flex;

    .Top_avater_div {
        position: relative;
        margin-top: 2%;
        flex: 0;
    }

    .Top_Message_div {
        position: relative;
        margin-left: 1%;
        flex: 9;
    }

    .Top_details_div {
        position: relative;
        margin-top: 2%;
        margin-left: 10%;
        background-color: rgba(178, 182, 240, 0.3);
        width: 35%;

        justify-content: flex-end;
        text-align: center;

    .column {
    .text {
        margin-top: 10px;
        color: #838b92;
        width: auto;
        height: auto;
    }

    .number {
        color: #222;
        font-size: 24px;
        width: auto;
        height: auto;
    }
    }
    }
    }

    .Top_options_div {
        margin-top: 10px;
        /*height: 50px;*/
        background-color: white;

    .custom-tabs-label {
        vertical-align: middle;

    .tab_icon {}

    }

    .tab_span {
        margin-bottom: 3px;
        font-size: 14px;
    }


    }

    .Main_div {
        margin-top: 10px;
        height: 23%;
        display: flex;

    .Course_div {
        float: left;
        background-color: white;
        width: 80%;
    .Course_header_span{
        display: flex;
    .el-text{
        margin-right: 20px;
        margin-left: 5px;
        font-size:30px;
    }
    }
    }

    .Right_div {
        float: right;
        background-color: white;
        width: 10%;
        margin-left: 5%;
    }
    }
    }

    .underline {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: black;
        transition: width 0.3s ease;
    }

    .el-tabs__item.is-active .underline {
        width: 100%;
    }
    .pageDiv{
        display: flex;
        justify-content: center
    }

    .followAndFansListClass{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .nameClass{
        margin-right: 20px;
        margin-left: 20px;
    }
    .followAndFansDivClass{
        height: 60vh;
        overflow: auto;
    }
</style>